<template>
  <div class="flex">
    <el-header style="margin-top: 20px;">
      <el-row>
        <el-col class="header-title">
          <span class="header-vertical" />
          站址信息
        </el-col>
      </el-row>
      <el-form ref="surroundRule" :rules="surroundRule" :model="surround" label-position="right"  label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="经度:" prop="longitude">
              <el-input v-model="surround['longitude']" placeholder="请输入" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="纬度:" prop="dimension">
              <el-input v-model="surround['dimension']" placeholder="请输入" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="站址类型:" prop="type">
              <el-select v-model="surround['type']" placeholder="请选择" filterable clearable>
                <el-option v-for="item in optionsType" :key="item.key" :value="item.key" :label="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col  :span="8">
            <el-form-item label="业务场景:" prop="scenario">
              <el-select value="defaultSceneTypes" v-model="surround['scenario']" placeholder="请选择" filterable >
                <el-option v-for="item in sceneTypes" :key="item.key" :value="item.key" :label="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col  :span="8">
            <el-form-item label="所属组织:" prop="organization">
              <el-input v-model="surround['organization']" placeholder="请输入" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
          <el-col  :span="8">
            <el-button class="query" style="margin-left: 120px;" @click="buttonClick">
              查询
            </el-button>
            <el-button class="query" @click="reset">
              重置
            </el-button>
          </el-col>
        </el-row>

      </el-form>
    </el-header>
    <el-main>
      <div class="contentInfo">
        <div class="contentInfo" style="margin-bottom:20px;">
          <el-row>
            <el-col class="header-title">
              <span class="header-vertical" />
              场景使用情况
            </el-col>
          </el-row>
          <el-row>
            <div class="inline">
              <div><span>调用次数/日：</span><span>{{ queryCount }}</span></div>
              <div><a class="link" href="javascript:;" @click="$router.push({name:'biz-ml'})">详情</a></div>
            </div>
          </el-row>
        </div>
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景说明
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">在选址和场租续签的谈判过程时，将周边已有站址按照不同业主类型列出最高价、最低价、平均价，对确定合理场租水平提供具有参考价值的数据，降低价格不透明造成的场地费损失，提升自主选址、自主维系水平。</div>
          </div>
          <div class="page-tip">
            <div class="params-tip"><span>示例参数</span>：经度:120.506929，纬度:31.443936，站址类型:楼面站，业务场景:高速，所属组织:320500</div>
          </div>
        </el-row>
      </div>
    </el-main>
    <el-main>
      <el-row :span="24">
        <el-col class="header-title">
          <span class="header-vertical" />
          查询列表
        </el-col>
      </el-row>
      <el-table v-loading="listLoading" ref="table" border :data="tableData" class="table-bottom" @cell-click="getContentDetail"
        element-loading-text="数据加载中...">
        <el-table-column align="center" prop="ownerTypeName" label="业主类型" show-overflow-tooltip />
        <el-table-column prop="max" label="最高价（元）" align="center" :formatter="formatMoney" show-overflow-tooltip />
        <el-table-column prop="avg" label="平均价（元）" align="center" :formatter="formatMoney" show-overflow-tooltip />
        <el-table-column prop="min" label="最低价（元）" align="center" :formatter="formatMoney" show-overflow-tooltip />
      </el-table>

    </el-main>
  </div>
</template>

<script>
  export default {
    data() {
      const longitudeChange = (rule, value, callback) => {
        const regular = /^\d{0,5}(\.\d{0,6})?$/g
        if (!value) {
          return callback(new Error('请输入经度'))
        }
        if (!value || Object.is(value, '0')) {
          return callback(new Error('经度不能为空或0'))
        }
        if (!regular.test(value)) {
          return callback(new Error('经度只能输入数字加6位小数'))
        }
        callback()
      }
      const latitudeChange = (rule, value, callback) => {
        const regular = /^\d{0,5}(\.\d{0,6})?$/g
        if (!value) {
          return callback(new Error('请输入纬度'))
        }
        if (!value || Object.is(value, '0')) {
          return callback(new Error('纬度不能为空或0'))
        }
        if (!regular.test(value)) {
          return callback(new Error('纬度只能输入数字加6位小数'))
        }
        callback()
      }
      return {
        listLoading: false,
        queryCount:0,
        surround: {
          longitude: '',
          dimension: '',
          type: '',
          scenario: '',
          organization: '',
          flag: '',
          house: '100.00',
          cpi: '100.00'
        },
        options: [{
            key: '01',
            value: '最高价（元）'
          },
          {
            key: '02',
            value: '平均价（元）'
          },
          {
            key: '03',
            value: '最低价（元）'
          }
        ],
        optionsType: [
        {key: '21001001',value: '地面站'},
{key: '21001002',value: '楼面站'},
{key: '21001003',value: '微站'},
{key: '21001004',value: '隧道站'},
{key: '21001005',value: '室内站'},
{key: '21001006',value: '虚拟站'}
          // {

          //   key: '2010035',
          //   value: '铁塔类'
          // },
          // {
          //   key: '2010037',
          //   value: '能源类'
          // },
          // {
          //   key: '2010054',
          //   value: '微站'
          // },
          // {
          //   key: '2010055',
          //   value: '隧道类室分'
          // },
          // {
          //   key: '2010056',
          //   value: '楼宇类室分'
          // }
        ],
        defaultSceneTypes:'0',
        sceneTypes: [
          // {
          //   key: '2010915',
          //   value: '县城'
          // },
          // {
          //   key: '2010920',
          //   value: '密集市区'
          // },
          // {
          //   key: '2010921',
          //   value: '一般市区'
          // },
          // {
          //   key: '2010922',
          //   value: '农村'
          // },
          // {
          //   key: '2010902',
          //   value: '乡镇'
          // }
          {key: '0',value: '默认值'},
          {key: '21013101',value: '国道'},
{key: '21013102',value: '高速'},
{key: '21013103',value: '高铁线'},
{key: '21013104',value: '其他交通干线'},
{key: '21013201',value: '3A以下景区'},
{key: '21013202',value: '3A级景区'},
{key: '21013203',value: '4A级景区'},
{key: '21013204',value: '5A及以上景区'},
{key: '21013301',value: '校园'},
{key: '21013302',value: '工业园'},
{key: '21013303',value: '住宅小区'},
{key: '21013304',value: '商业市场'},
{key: '21013305',value: '医院'},
{key: '21013306',value: '机场'},
{key: '21013307',value: '车站'},
{key: '21013308',value: '码头'},
{key: '21013309',value: '商务楼宇'},
{key: '21013310',value: '大型场馆'},
{key: '21013311',value: '大型商场'},
{key: '21013312',value: '餐饮娱乐场所'},
{key: '21013313',value: '宾馆酒店'},
{key: '21013401',value: '密集市区'},
{key: '21013402',value: '一般市区'},
{key: '21013403',value: '县城'},
{key: '21013404',value: '乡镇'},
{key: '21013405',value: '农村'}
        ],
        ownTypes: {
          '企业': 'company',
          '机关': 'office',
          '事业单位': 'insitution',
          '社会团体': 'organization',
          '其他组织机构': 'other',
          '个人': 'person',
          '境外机构': 'oversea'
        },
        tableData: [],
        paginationData: {
          currentPage: 1,
          pageSize: 10,
          total: 0
        },

        surroundRule: {
          longitude: [{
            required: true,
            validator: longitudeChange,
            trigger: 'blur'
          }],
          dimension: [{
            required: true,
            validator: latitudeChange,
            trigger: 'blur'
          }],
          type: [{
            required: true,
            message: '请选择站址类型',
            trigger: 'blur'
          }],
          // scenario: [{
          //   required: true,
          //   message: '请输入业务场景',
          //   trigger: 'blur'
          // }],
          organization: [{
            required: true,
            message: '请输入所属组织',
            trigger: 'blur'
          }],
          flag: [{
            required: true,
            message: '请选择价格类型',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.queryPageCount('1.6')
    },
    mounted() {},
    methods: {
      // 分页跳转
      currentChange(targetPage) {
        this.paginationData['currentPage'] = targetPage
        // table数据接口
        this.buttonClick()
      },
      // 分页跳转
      handleSizeChange(size) {
        this.paginationData['pageSize'] = size
        this.paginationData['currentPage'] = 1
        // table数据接口
        this.buttonClick()
      },
      async buttonClick() {
        try {
          this.tableData = []
          await this.$refs['surroundRule'].validate()
          let tmp = this.surround['scenario'];
          if(tmp ==null || tmp ==''){
            tmp = '0';
          }

          const data = {
            datas: [{
              longitude: this.surround['longitude']+'0000',
              latitude: this.surround['dimension']+'0000',
              coverScene: tmp,//this.surround['scenario'],
              typeId: this.surround['type'],
              districtId: this.surround['organization']
              // flag: this.surround['flag'],
              // house: this.surround['house'],
              // cpi: this.surround['cpi']
            }]
          }
          const r = await this.$http({
            url: this.$http.adornBizUrl('/site/findSiteDetail'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify(data), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          this.tableData = r.data.data
          for(var i=0;i<this.tableData.length;i++){
            if(this.tableData[i].avg == 0){
              this.tableData[i].avg = '0.0';
            }
            if(this.tableData[i].max == 0){
              this.tableData[i].max = '0.0';
            }
            if(this.tableData[i].min == 0){
              this.tableData[i].min = '0.0';
            }
          }
          // result.forEach((d) => {
          //   if (d.ownerTypeName === '企业') {
          //     this.setTableData('company', d)
          //   }
          //   if (d.ownerTypeName === '个人') {
          //     this.setTableData('person', d)
          //   }
          // })
          // this.dialogVisible = true
        } catch (e) {
          console.log(e)
        } finally {
          this.listLoading = false
        }
      },
      // setTableData (type, data) {
      //   this.ownerType[type] = data.ownerType
      //   this.tableData.forEach((t) => {
      //     if (t.key === 'max') {
      //       t[type] = data.max
      //     }
      //     if (t.key === 'min') {
      //       t[type] = data.min
      //     }
      //     if (t.key === 'avg') {
      //       t[type] = data.avg
      //     }
      //   })
      // },
      async getContentDetail(row, column, cell, event) {
        if (row.ownerTypeName) {
          const ownerType = row.ownerType
          const ownerTypeContent = this.ownTypes[row.ownerTypeName]
          console.log(this.options);
          console.log(column.label);
          const priceId = this.options.filter(p => p.value === column.label)[0].key
          const priceContent = column.property
          await this.$refs['surroundRule'].validate()
          const data = {
            longitude: this.surround['longitude'],
            latitude: this.surround['dimension'],
            coverScene: this.surround['scenario'],
            typeId: this.surround['type'],
            districtId: this.surround['organization'],
            flag: `${ownerType}${priceId}`
          }
          // this.$store.commit('updateLal', data)
          // const routePath = `/biz-ppr-${row.key}`;
          this.$router.push({
            path: `/biz-ppr/${ownerTypeContent}/${priceContent}`,
            // params: {ownid: ownerType, priceId: row.key},
            query: data
          })
        }
      },
      formatMoney(row, column) {
        let value = ''
        var num = row[column.property]
        if (num > 0) {
          value = num
          if (value > 999) {
            let parts = value.toString().split('.')
            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
            value = parts.join('.')
          }
        }
        return value
      },
      reset() {
        this.surround = {
          longitude: '',
          dimension: '',
          type: '',
          scenario: '0',
          organization: '',
          flag: '',
          house: '100.00',
          cpi: '100.00'
        }
        this.tableData = []
        this.$refs['surroundRule'].clearValidate();
      },
      change(e) {
        this.$forceUpdate()
      },
      async queryPageCount(scene) {
        try {
          const r = await this.$http({
            url: this.$http.adornBizUrl('/log/queryStatistics'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify({scene:scene}), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          if(r.data.data && r.data.data.length >0){
              var result = r.data.data[0];
              this.queryCount=result.cnt||'0';
          }
        } catch (e) {
          console.log(e)
        } finally {
        }
      }
    }
  }
</script>

<style scoped>
.inline{
  background-color: #f5f5f5;
}
  .page-tip {
    height: auto;
    min-height: 52px;
    line-height: 52px;
    background-color: #f5f5f5;
  }
  .page-tip .description,
  .page-tip .params-tip {
    line-height: 32px;
  }
  .page-tip .params-tip {
    display: block;
    padding: 0;
    margin: 0;
    background-color: #fff8f1;
  }
  .page-tip:nth-of-type(2) {
    height: auto;
    margin-top: 10px;
    background-color: #fff8f1;
  }
  .page-tip:nth-of-type(2) span {
    color: #eb4b4b;
  }

  .flex {
    display: flex;
    flex-direction: column;
  }

  .el-input,
  .el-select {
    width: 80%;
  }

  .header-title {
    color: rgba(235, 75, 75, 1);
    margin-bottom: 20px;
  }

  .header-vertical {
    margin-right: 10px;
    border: 2px solid rgba(235, 75, 75, 1);
    background: rgba(235, 75, 75, 1);
  }

  .query {
    color: rgba(255, 255, 255, 1);
    background: rgba(235, 75, 75, 1);
    border-radius: 6px;
    border-color: rgba(235, 75, 75, 1);
  }

  .query:nth-of-type(2) {
    background: rgba(255, 255, 255, 1);
    color: rgba(235, 75, 75, 1);
    border-radius: 6px;
    border-color: rgba(235, 75, 75, 1);
  }

  .el-table--border /deep/ th:first-child /deep/ .cell,
  .el-table /deep/ th /deep/ .cell {
    color: #333333;
  }

  .el-table /deep/ th {
    background: rgba(241, 241, 241, 1);
  }

  .el-table__row {
    cursor: pointer;
  }
</style>
